<template>
  <div class="xx-header">
      <el-header :style="{'background-color':'#1e1f26'}">
        <div style="float:left;">
          <h1 > {{ state.title }} </h1>
          <h6>made by Vue3 & TypeScript</h6>
        </div>
        <div style="float:left;">

        </div>
        <div style="float:right;" >
            <el-button type="success" @click="dialogFormVisible2=true">Sign Up</el-button>
            <el-button style="margin-left:10px;" type="info" @click="dialogFormVisible=true">Log In</el-button>
        </div>
      </el-header>
  </div>
</template>
<script>
import { reactive } from 'vue'
export default {
  setup () {
    const state = reactive({
      title: 'CodeShare'
    })
    return {
      state: state
    }
  }
}
</script>
<style lang="less" scoped>
h1{
  padding: 0px;
  margin: 0px;
  font-size: 1.5em;
  line-height: initial;
}
h6{
  padding: 0px;
  margin: 0px;
  line-height: initial;
}
.el-header, .el-footer {
  background-color: #02899c;
  color: #fff;
  text-align: center;
  box-shadow: 2px 5px 5px rgb(0 0 0 / 20%);
  z-index: 100;
  position: fixed;
  width: 100%;
  line-height: 60px;
}
</style>
